<template>
  <div class="resetpwd-container">
    <!-- 手机号验证表单 找回密码 -->
    <div class="pwd-form">
      <van-form ref="PwdRef">
        <van-cell-group inset>
          <van-field
            v-model="resetPwdForm.password"
            name="password"
            type="password"
            label="请输入新密码"
            placeholder="请输入新密码"
            :rules="pwdFormRules.password"
            autocomplete="off"
          />
          <van-field
            v-model="confirmPwd"
            center
            clearable
            label="再次输入密码"
            placeholder="请再次输入密码"
            autocomplete="off"
          >
          </van-field>
        </van-cell-group>
        <!-- 提交按钮 -->
        <div class="login-btns">
          <van-button round block type="primary" native-type="submit" @click="onResetPwd">
            确认
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { showToast, showDialog } from 'vant'
import { resetPwd } from '../../api/user.js'
export default {
  data() {
    return {
      resetPwdForm: {
        phone: '',
        password: ''
      },
      confirmPwd: '',
      // 密码重置表单的验证规则
      pwdFormRules: {
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式错误，需包含字母、数字' }
        ]
      }
    }
  },
  created() {
    this.phone = this.$route.params.phone
  },
  methods: {
    async onResetPwd() {
      this.$refs.PwdRef.validate()
        .then(async () => {
          if (this.resetPwdForm.password === this.confirmPwd) {
            const { data: res } = await resetPwd(this.resetPwdForm)
            if (res.code === 1) {
              // 修改密码成功
              showDialog({
                message: '修改密码成功'
              }).then(() => {
                this.$router.push('/login')
              })
            } else {
              return showToast('手机号码有误')
            }
          } else {
            return showToast('两次输入的密码不一致')
          }
        })
        .catch(() => {
          // 表单验证失败
          showToast('表单填写有误！')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.resetpwd-container {
  position: relative;
  height: 100vh;
  background-color: #f3f3f3;
  // 手机号码登录表单
  .pwd-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #fff;

    .van-form {
      margin-top: 40px;
      .van-cell-group {
        margin: 0 20px;
        background-color: #f3f3f3;

        .van-field {
          align-items: center;
          height: 58px;
          margin: 10px 0;
          border: 1px solid #a8ebab;
          border-radius: 3px;
          font-size: 18px;
        }
      }

      .login-btns {
        display: flex;
        justify-content: center;
        margin: 30px 0;

        .van-button {
          width: 40%;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
